<template>
  <div class="hot-container">
    <div class="hot-top">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png">
      <span class="title">本周热门榜单</span>
      <span class="more">全部榜单 ></span>
    </div>
    <ul class="hot-list">
      <li class="hot-item" v-for="item in hotList" :key="item.id" @click="toDetail()">
        <img :src="item.imgUrl">
        <p class="name">{{item.name}}</p>
        <p class="price">
          <span class="number">￥{{item.price}}</span>起
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["hotList"],
  data() {
    return {};
  },
  methods: {
    toDetail() {
      this.$router.push("./detail");
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~css/var.styl'

.hot-container
  background #ffffff
  margin-top 0.2rem
  font-size 0.28rem

.hot-top
  background #fff
  padding 0.2rem

  img
    width 0.3rem
    height 0.3rem

  .title
    font-size 0.32rem

  .more
    position absolute
    right 0.2rem

.hot-list
  margin 0.1rem 0
  padding 0 0.24rem
  white-space nowrap
  overflow-x scroll
  overflow-y hidden

.hot-item:not(:first-child)
  margin-left 0.1rem

.hot-item
  display inline-block
  width 2rem
  height 2rem
  padding-top 0.1rem
  padding-bottom 0.2rem
  text-align center

  p
    textOverflow()

  img
    width 2rem
    height 2rem

  .number
    color #ff8300
</style>


